<template>
	<view class="content">
		<view class="pageHeader">
			文件
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
		</view>
		<view class="regoodbox">
			<view v-if="fileList.length<=0" class="empty">
				<image src="/static/empty.png" mode="widthFix"></image>
				<view class="empty-tips">
					暂无文件~
				</view>
			</view>
			<view v-for="(item,index) in fileList" :key="index" style="position: relative;" @click="godetail(item.uf_id)">
				<!-- <image src="../../static/file-1.png" style="width: 100%;height: 350upx;position: relative;z-index: 1;"></image> -->
				<view  class="outitem" style="background: url(../../static/file-1.png) no-repeat center;background-size: cover;">
					<view style="padding:24upx 20upx;">
						<view class="flex aic jsb">
							<view  class="flex aic">
								<image src="../../static/file-2.png" style="width:32upx;height:32upx;margin-right: 4upx;"></image>
								<text class="eliplis filetxt">{{item.title}}</text>
							</view>
							<view>持有量：{{item.file_num}}/{{item.grant_files}}</view>
						</view>
						<view class="code flex jsb">
							<text>文件代码：{{item.code}}</text>
							<text style="margin-left: 16upx;font-size: 24upx;">创建时间：{{item.file_add_time}}</text>
						</view>
						
						<view class="flex aic jsb filevaule">
							<text>文件总业绩:￥{{item.totalperformance}}</text>
							<text>每份文件价值:￥{{item.valuepershare}}</text>
						</view>
						
						
						<view class="flex aic jsb filevaule">
							<text>今日文件分红额:￥{{item.dividendamounttoday}}</text>
							<text>今日每份分红:￥{{item.today_bonus_mf}}</text>
						</view>
						<view class="flex aic jsb filevaule">
							<text>用户今日分红:￥{{item.today_bonus}}</text>
							<text>用户历史分红总额:￥{{item.sum_bonus}}</text>
						</view>
						<view class="flex aic jc-end">
							日期 : {{item.nowtime}}
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	export default {
		data() {
			return {
				userToken:'',// token
				fileList:[],
				page : 1,
				loadingText: '加载中...'
			}
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getFileList()

		},
		methods: {
			// 返回上一页
			backpage(){
				uni.navigateBack({
					delta:1
				})
			},
			godetail(id){
				uni.navigateTo({
					url:'filedetail?id='+id,
					animationDuration:300
				})
			},
			//滚动到底部
			
			onReachBottom:function(){
				this.getFileList();
			},
			//获取订单列表
			getFileList() {
				let that = this;
				uni.showNavigationBarLoading();
			
				let postdata = {

					token: that.userToken,
					m: 0,
					n: 20
				};
				// 我的订单列表
				let fileLog = [];
				postAjax('File/fileList', postdata, function(data) {
					if (data.code == 0) {
						fileLog = data.data.data;
			
						if (fileLog.length > 0) {
							that.fileList = that.fileList.concat(fileLog);
			
							that.page++; //每触底一次 page +1
						} else {					
							that.loadingText = '已加载全部';				
							

						}
						
						if(that.fileList.length<10){
							that.loadingText = '';
						}
			
						uni.hideNavigationBarLoading();
					}else{
						that.getFileList()
					}
				});
			}
		}
	}
	
</script>

<style>
	.content{min-height: 100vh;background-color: #F9F9F9;}
	.pageHeader{position: fixed;top:0;left:0;z-index:999;width: 100%;height: 128upx;background-color: #1D84E8;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.regoodbox{padding: 180upx 30upx 22upx;}
	.outitem{position: absolute;z-index: 10;width: 100%;color: #fff;font-size: 26upx;top:0;left: 0;border-radius: 20upx;margin-bottom: 30upx;}
	.eliplis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
	.filetxt{font-size: 26upx;}
	.code{padding-bottom: 20upx;margin-top: 8upx;border-bottom: 2upx solid #fff;padding-left: 36upx;}
	.filevaule{margin: 16upx 0;}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	
	}
	
	.empty image {
		width:240upx;
		margin-bottom: 30upx;
	}
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
</style>
